<!--Generate by Kevin's CodeBuilder -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
		<meta charset="UTF-8">
		<title>bui-ssm快速开发框架</title>
		<head th:include="source::header"></head>
		<style type="text/css">
				.form_main_wrap{
					position:relative;
					height:100%;
					width:100%;
				}
				.form_main_wrap > div{
					height:100%;
					width:100%;
					position:absolute;
					top:0;
					left:0;
					overflow:auto;
				}
				#tree_wrap{
					width:350px;
					z-index:2;
					border-right:1px dashed #ccc;
				}
				#func_wrap{
					z-index:1;
					border-left:350px solid #fff;
					padding-left:0px;					
				}
				.form_main_wrap > div > h1{
					border-bottom:1px dashed #ccc;
					line-height:34px;
				}
				#func_list{
					padding: 12px 20px;
				}
				#func_list label{
					display: block;
					float:left;
				}
		</style>
</head>
<body>
		<div class="form_main_wrap">
			<div id="tree_wrap" class="k_box_size">
				<h1 style="text-align:center;height: 34px;position: absolute;top:0;width: 100%;z-index: 6">[(${Lang.role_menu_tree})]</h1>
				<div class="k_box_size" style="width:100%;height:100%; position:absolute;top:0;left:0;z-index:5;overflow: auto;border-top:34px solid #fff;">
					
						<ul id="tree">
						</ul>			
				</div>
				
			</div>
			<div id="func_wrap" class="k_box_size">
				<h1 style="padding-left:20px">
					<span style="padding-right:14px">[(${Lang.role_func_list})]</span>
					<label id="chkAll" class="k_checkbox_label k_checkbox_anim"><input type="checkbox"  value=""><i class="k_checkbox_i"></i>全选</label>
					
					<span>
						关键词 <input type="text" id="search_key" value=""/><a onclick="keySearch()" style="padding-left:8px;cursor:pointer;">筛选</a>
					</span>
					<button id="saveBtn" class="k_icon_fff" style="margin-left:50px"><i class="fa fa fa-check"></i>[(${Lang.common_save})]</button>
					
				</h1>
				<div id="func_list">
				</div>
			</div>
		</div>
</div>
<script type="application/javascript" th:inline="javascript">
	var tree,$tree,$list,currentMenuIds;
	
	function keySearch(){
		var txt = $("#search_key").val();
		$list.children().each(function(){
			var label = $(this);
			if(txt !== "" && label.text().indexOf(txt) < 0){
				label.hide();
			}else{
				label.show();
			}
		});
	}
	
	/**加载功能**/
	function loadFunc(idList){
		currentMenuIds = idList;
		$list.loading();
		$B.request({
			data:{ idList:idList.join(","),roleId:'[(${roleId})]' },
			url: $B.getHttpHost(ctxPath)+"role/loadFunc?cmd=funcMrg",
			ok:function(message,res){
				var data = res.funcList;
				var rRobj = res.rRobj;
				if(data.length === 0){
					$list.html('<i class="fa fa-info-circle" style="padding-right:8px"></i>[(${Lang.common_noData})]');
				}else{
					$list.html("");
					for(var i = 0,len = data.length ;i < len ;++i){
						var checked = "";
						if(rRobj[data[i].id]){
							checked = "checked";
						}
						var $chk = $('<label style="line-height:30px" class="k_checkbox_label k_checkbox_anim">'
                        +'<input type="checkbox" '+checked+' value="'+data[i].id+'" /><i class="k_checkbox_i"></i>'+data[i].extFeildsMap.menuText +"-"+ data[i].funcDesc+'</label>');
						$chk.appendTo($list);
						$chk.children("input").data("data",data[i]);
					}
				}
			},
			fail:function(message){
				$list.html(message);
			}
		});
	}
	
	$(function(){
		var menuJson = [(${menuJson})];	
		var treeJson = [{
			id:"0",
			text:'所有',
			data:{},
			children:menuJson
		}];		
		$tree = $("#tree");
		$list = $("#func_list");
		
	    tree = new $B.Tree($tree, {
            data: treeJson, //'数据'
            nodeParentIcon: 'fa-folder-empty', //父节点图标关闭状态
            nodeParentOpenIcon: 'fa-folder-open-empty', //打开状态图标
            leafNodeIcon: 'fa-doc', //子节点图标 
            checkbox: false,
            onClick: function (data, params) { //function (data) { },//点击事件              
            	var idList = [];
            	if(data.id !== "0"){
            		for(var i = 0 ,len = data.length ;i < len ;++i){
                		idList.push(data[i].id);
                	}
            	}
            	loadFunc(idList);
            }
        });
	    $("#chkAll").children("input").click(function(){
	    		var chk = $(this);
	    		$list.children().each(function(){
    				var $lb = $(this);
    				console.log($lb.css("display"));
    				if($lb.css("display") !== "none"){    					
    					if(chk.prop("checked")){
    						$lb.children("input").prop("checked",true);
    			    	}else{
    			    		$lb.children("input").prop("checked",false);
    			    	}
    				}
    			});	
	    });
		$("#saveBtn").click(function(){
			var saveData = [];
			$list.find("input:checked").each(function(){
				var data = $(this).data("data");
				saveData.push({funcId:data.id,menuId:data.menuId});
			});
			var strFunc = "";
			if(saveData.length > 0){
				strFunc = JSON.stringify(saveData);
			}
			$B.request({
				data:{roleId:'[(${roleId})]',funcs:strFunc,menus:currentMenuIds.join(",")},
				url:$B.getHttpHost(ctxPath)+"role/funcMrg",
				ok:function(msg,data){
					$B.success("[(${Lang.common_saveSucess})]",1.5);
				}
			},$(this));			
	    });
		$tree.children().first().children("div").trigger("click");
	});
</script>

</body>
</html>